<template>
    <!-- 
    <b-modal ref="my-modal" hide-footer title="Using Component Methods">
     <div class="d-block text-center">
       <h3>Hello From My Modal!</h3>
     </div>
     <b-button class="mt-3" variant="outline-danger" block @click="hideModal">Close Me</b-button>
     <b-button class="mt-2" variant="outline-warning" block @click="toggleModal">Toggle Me</b-button>
   </b-modal> 
    -->
    <!--
        body-class="modalStyle" 表示样式
        size="lg" 表示模态窗口大小 xl,lg,sm,full
        hide-footer 表示隐藏底部按钮
        hide-header 表示隐藏头部内容
        no-close-on-backdrop 表示鼠标点击背景不可关闭
        hide-header-close 表示隐藏头部关闭按钮
        centered 居中
        ok-title=“确定” 
        cancel-title=取消
        @ok="handleOk" 
        @cancel="handleCancel"
        scrollable 滚动条
        hide-backdrop 隐藏背景
        wrapClassName="ant-modal-cust-warp" 
        style="top:5%;height: 85%;overflow-y: hidden" 样式
    -->
    <b-modal ref="my-modal" size="xl" title="个人信息" hide-footer scrollable no-close-on-backdrop>
        <div class="d-block text-center">
            <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed" id="defaultForm"
                method="post">
                <input type="hidden" id="xt_userinfo_id" name="xt_userinfo_id">
                <div class="form-group m-form__group row">
                    <label class="col-lg-1 col-form-label">隶属部门</label>
                    <label class="col-lg-2 col-form-label">{{myInfoForm.xt_departinfo_name}}</label>
                    <label class="col-lg-1 col-form-label">隶属岗位</label>
                    <label class="col-lg-2 col-form-label">{{myInfoForm.xt_post_name}}</label>
                </div>
                <div class="form-group m-form__group row">
                    <div class="col-md-1">
                        <label class="col-form-label"
                            jEhcLang="xt_userinfo_name">账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</label>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label class="col-form-label">{{myInfoForm.xt_userinfo_name}}</label>
                        </div>
                    </div>

                    <div class="col-md-1">
                        <label class="col-form-label" jEhcLang="xt_userinfo_card">身份证号</label>
                    </div>
                    <div class="col-md-2">
                        <label class="col-form-label">{{myInfoForm.xt_userinfo_card}}</label>
                    </div>
                    <div class="col-md-1">
                        <label class="col-form-label" jEhcLang="xt_userinfo_birthday">出生年月</label>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label class="col-form-label">{{myInfoForm.xt_userinfo_birthday}}</label>
                        </div>
                    </div>
                </div>
                <div class="form-group m-form__group row">
                    <div class="col-md-1">
                        <label class="col-form-label"
                            jEhcLang="xt_userinfo_realName">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
                    </div>
                    <div class="col-md-2">
                        <label class="col-form-label">{{myInfoForm.xt_userinfo_realName}}</label>
                    </div>
                    <div class="col-md-1">
                        <label class="col-form-label"
                            jEhcLang="xt_userinfo_origo">籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯</label>
                    </div>
                    <div class="col-md-2">
                        <label class="col-form-label">{{myInfoForm.xt_userinfo_origo}}</label>
                    </div>
                    <div class="col-md-1">
                        <label class="col-form-label" jEhcLang="xt_userinfo_schoolName">毕业学校</label>
                    </div>
                    <div class="col-md-2">
                        <label class="col-form-label">{{myInfoForm.xt_userinfo_schoolName}}</label>
                    </div>
                </div>

                <div class="form-group m-form__group row">
                    <div class="col-md-1">
                        <label class="col-form-label" jEhcLang="xt_userinfo_phone">联系电话</label>
                    </div>
                    <div class="col-md-2">
                        <label class="col-form-label">{{myInfoForm.xt_userinfo_phone}}</label>
                    </div>
                    <div class="col-md-1">
                        <label class="col-form-label" jEhcLang="xt_userinfo_mobile">移动电话</label>
                    </div>
                    <div class="col-md-2">
                        <label class="col-form-label">{{myInfoForm.xt_userinfo_mobile}}</label>
                    </div>
                    <div class="col-md-1">
                        <label class="col-form-label" jEhcLang="xt_userinfo_ortherTel">其它电话</label>
                    </div>
                    <div class="col-md-2">
                        <label class="col-form-label">{{myInfoForm.xt_userinfo_ortherTel}}</label>
                    </div>
                </div>
                <div class="form-group m-form__group row">

                    <div class="col-md-1">
                        <label class="col-form-label" jEhcLang="xt_userinfo_email">电子邮件</label>
                    </div>
                    <div class="col-md-2">
                        <label class="col-form-label">{{myInfoForm.xt_userinfo_email}}</label>
                    </div>
                    <div class="col-md-1">
                        <label class="col-form-label"
                            jEhcLang="xt_userinfo_address">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址</label>
                    </div>
                    <div class="col-md-2">
                        <label class="col-form-label">{{myInfoForm.xt_userinfo_address}}</label>
                    </div>
                </div>
                <div class="form-group m-form__group row">
                    <div class="col-md-1">
                        <label class="col-form-label" jEhcLang="xt_userinfo_intime">入职时间</label>
                    </div>
                    <div class="col-md-2">
                        <label class="col-form-label">{{myInfoForm.xt_userinfo_intime}}</label>
                    </div>
                    <div class="col-md-1">
                        <label class="col-form-label" jEhcLang="xt_userinfo_contractTime">到期时间</label>
                    </div>
                    <div class="col-md-2">
                        <label class="col-form-label">{{myInfoForm.xt_userinfo_contractTime}}</label>
                    </div>
                    <div class="col-md-1">
                        <label class="col-form-label" jEhcLang="xt_userinfo_qq">QQ号码</label>
                    </div>
                    <div class="col-md-2">
                        <label class="col-form-label">{{myInfoForm.xt_userinfo_qq}}</label>
                    </div>
                </div>
                <div class="form-group m-form__group row">
                    <div class="col-md-1">
                        <label class="col-form-label"
                            jEhcLang="xt_userinfo_nation">名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;族</label>
                    </div>
                    <div class="col-md-2">
                        <select class="form-control" 
                        disabled="disabled"
                        maxlength="32"
                        style="background: #fff;border:1px dashed #ebedf2" 
                        v-model="myInfoForm.xt_userinfo_nation" placeholder="暂无" >
                            <option value="">请选择</option>
                            <option 
                                v-for="item in nationList"
                                :key="item.xt_data_dictionary_id"
                                :label="item.xt_data_dictionary_name"
                                :value="item.xt_data_dictionary_id"></option>
                        </select>
                    </div>
                    <div class="col-md-1">
                        <label class="col-form-label" jEhcLang="xt_userinfo_ismarried">婚姻状况</label>
                    </div>
                    <div class="col-md-2">
                        <select class="form-control" 
                            maxlength="32"  
                            style="background: #fff;border:1px dashed #ebedf2" disabled="disabled"
                            v-model="myInfoForm.xt_userinfo_ismarried" placeholder="暂无">
                            <option value="">请选择</option>
                            <option 
                                v-for="item in marriedList"
                                :key="item.xt_data_dictionary_id"
                                :label="item.xt_data_dictionary_name"
                                :value="item.xt_data_dictionary_id"></option>
                        </select>
                    </div>

                    <div class="col-md-1">
                        <label class="col-form-label"
                            jEhcLang="xt_userinfo_sex">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</label>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <select class="form-control" style="background: #fff;border:1px dashed #ebedf2"
                                 v-model="myInfoForm.xt_userinfo_sex" >
                                <option value="">请选择</option>
                                <option 
                                    v-for="item in genderList"
                                    :key="item.xt_data_dictionary_id"
                                    :label="item.xt_data_dictionary_name"
                                    :value="item.xt_data_dictionary_id"></option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-group m-form__group row">
                    <div class="col-md-1">
                        <label class="col-form-label"
                            jEhcLang="xt_userinfo_remark">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</label>
                    </div>
                    <div class="col-md-5">
                        <textarea class="form-control" readonly style="background: #fff;border:1px dashed #ebedf2"
                            name="xt_userinfo_remark" placeholder="请输入" v-model="myInfoForm.xt_userinfo_remark"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <template slot="modal-footer">
            <!--自定义按钮-->
        </template>
    </b-modal>
</template>
<script>
import apiUtil from "@/core/util/apiUtil.js";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";
export default {
    data() {
        return {
            stateList: [],
            marriedList: [],
            highestDegreeList: [],
            workYearList: [],
            nationList: [],
            genderList: [],
            myInfoForm: {
                xt_userinfo_id: "",
                xt_userinfo_name: "",
                xt_userinfo_realName: "",
                xt_departinfo_id: "",
                xt_departinfo_name: "",
                xt_post_id: "",
                xt_post_name: "",
                xt_userinfo_sex: "",
                xt_userinfo_birthday: "",
                xt_userinfo_realName: "",
                xt_userinfo_ismarried: "",
                xt_userinfo_card: "",
                xt_userinfo_nation: "",
                xt_userinfo_origo: "",
                xt_userinfo_schoolName: "",
                xt_userinfo_phone: "",
                xt_userinfo_mobile: "",
                xt_userinfo_ortherTel: "",
                xt_userinfo_remark: "",
                xt_userinfo_address: "",
                xt_userinfo_intime: "",
                xt_userinfo_outTime: "",
                xt_userinfo_contractTime: "",
                xt_userinfo_qq: "",
                xt_userinfo_email: "",
                xt_userinfo_state: "",
                xt_userinfo_politicalStatus: "",
                xt_userinfo_highestDegree: "",
                xt_userinfo_workYear: ""
            },
        }
    },
    components: {

    },
    props: {

    },
    watch: {

    },
    mounted() {
    },
    methods: {
        showModal() {
            this.$refs['my-modal'].show();
            this.getMyInfo();
        },
        hideModal() {
            this.$refs['my-modal'].hide()
        },
        toggleModal() {
            // 当模态已隐藏时，我们传递要返回焦点的按钮的ID
            this.$refs['my-modal'].toggle('#toggle-btn')
        },
        restForm() {
            //重置
            Object.assign(this.$data.myInfoForm, this.$options.data().myInfoForm);
        },
        getMyInfo() {
            apiUtil.get(process.env.VUE_APP_OAUTH_API + "/httpSessionEntity").then(({ data }) => {
                let info_body = data.oauthAccountEntity.info_body;
                this.myInfoForm.xt_userinfo_email = data.oauthAccountEntity.xt_userinfo_email;
                this.myInfoForm.xt_userinfo_name =  data.oauthAccountEntity.account;
                this.myInfoForm.xt_userinfo_realName = data.oauthAccountEntity.name;
                if(null != info_body && "" != info_body){
                    let result = JSON.parse(info_body);
                    this.myInfoForm = result;
                    this.initGender();
                    this.initNation();
                    this.initHighestDegree();
                    this.initWorkYear();
                    this.initState();
                    this.initMarried();
                }
            });
        },
        initGender() {//加载性别
            let params = {};
            apiUtil.query(process.env.VUE_APP_SYS_API + "/xtCommon/xtDataDictionary/list/gender", params).then(({ data }) => {
                this.genderList = data.data;
            });
        },
        initNation() {//加载名族
            let params = {};
            apiUtil.query(process.env.VUE_APP_SYS_API + "/xtCommon/xtDataDictionary/list/xt_userinfo_nation", params).then(({ data }) => {
                this.nationList = data.data;
            });
        },
        initHighestDegree() {//加载文化程度数据字典
            let params = {};
            apiUtil.query(process.env.VUE_APP_SYS_API + "/xtCommon/xtDataDictionary/list/xt_userinfo_highestDegree", params).then(({ data }) => {
                this.highestDegreeList = data.data;
            });
        },
        initWorkYear() {//加载工作年限数据字典
            let params = {};
            apiUtil.query(process.env.VUE_APP_SYS_API + "/xtCommon/xtDataDictionary/list/xt_userinfo_workYear", params).then(({ data }) => {
                this.workYearList = data.data;
            });
        },
        initState() {//加载状态数据字典
            let params = {};
            apiUtil.query(process.env.VUE_APP_SYS_API + "/xtCommon/xtDataDictionary/list/xt_userinfo_state", params).then(({ data }) => {
                this.stateList = data.data;
            });
        },
        initMarried() {//加载是否已婚数据字典
            let params = {};
            apiUtil.query(process.env.VUE_APP_SYS_API + "/xtCommon/xtDataDictionary/list/xt_userinfo_ismarried", params).then(({ data }) => {
                this.marriedList = data.data;
            });
        },

    }
}
</script>